﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Rino's items</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="/js/jquery.infinitecarousel.js" type="text/javascript"></script>
  <!--<script src="/js/audio.js" type="text/javascript"></script>-->
  <!--<script type="text/javascript" src="http://www.google.com/jsapi"></script>-->
  <script type="text/javascript" src="/_ah/channel/jsapi"></script>
  <!--<script src="/js/ecl.js" type="text/javascript"></script>-->
  <script type="text/javascript">
    //google.load("language", "1");
    //channel = new goog.appengine.Channel('{{ token }}');
    //client_id = '{{ client_id }}';

    $(function() {
      $('#carousel1').infiniteCarousel({
        displayTime: 7500,  
        displayThumbnailNumbers: 1,
        displayThumbnailBackground: 0,
        iconPath: '/images/' 
      });
    });

    //    var defaults =
    //			{
    //			  transitionSpeed: 1500,
    //			  displayTime: 6000,
    //			  textholderHeight: .2,
    //			  displayProgressBar: 1,
    //			  displayThumbnails: 1,
    //			  displayThumbnailNumbers: 1,
    //			  displayThumbnailBackground: 1,
    //			  thumbnailWidth: '20px',
    //			  thumbnailHeight: '20px',
    //			  thumbnailFontSize: '.7em',
    //			  iconPath: 'images/'         
    //			};    
  </script>
  <style type="text/css">
    #carousel1
    {
      width: 960px;
      height: 576px;
      overflow: scroll;
      border: 2px solid #999;
    }
    .textholder
    {
      text-align: left;
      font-size: small;
      padding: 6px;
      -moz-border-radius: 6px 6px 0 0;
      -webkit-border-top-left-radius: 6px;
      -webkit-border-top-right-radius: 6px;
    }
  </style>
</head>
<body>
  <div id="carousel1">
    <ul>
      {% for photo in photos.entry %}
      <li>
        <img alt="" src="{{ photo.content.src }}" width="960" height="576" />
          <p>{{ photo.summary.text }}</p>
      </li>
      {% endfor %}
    </ul>
  </div>
</body>
</html>
